<template>
  <div class="deliverpage">
    <div class="my-deliverd ">
      <div class="primary-content h100">

        <div class="my-deliverd_box">
          <!-- 左边导航内容 -->
          <div class="my-deliverd_box-left">
            <div class="my-info">
              <div class="my-info_head">
                <img :src="temptitleimg"></div>
              <div class="my-info_name">
                <p class="info-title ellipsis"></p>
                <!--  href="/personal-center"-->
                <a target="_blank" href="javascript:void(0)" @click="handleToNewTab('personalcenter')" class="info-detail"
                   style="margin-top:4px">返回个人中心&gt;&gt;</a>
              </div>
            </div>
            <!-- href="/my/delivered" :class="{block_item_active:block_active}" -->
            <a href="javascript:void(0)" class="">
              <div class="block-item" @click="selectActive()" :class="{block_item_active:block_active1}">
                <p class="info-title">我的投递(0)</p>
                <p class="info-detail" style="margin-top:8px;">
                  显示最近6个月的投递记录
                </p></div>
            </a>
            <!--  href="/my/collect"-->
            <a href="javascript:void(0)" class="nuxt-link-exact-active nuxt-link-active" aria-current="page">
              <div class="block-item " @click="selectActive()" :class="{block_item_active:block_active2}">
                <p class="info-title">我的收藏(0)</p>
                <p class="info-detail" style="margin-top:8px;">把喜欢的放在这里</p>
              </div>
            </a>

          </div>
          <!-- 右边显示内容区 -->
          <div class="my-deliverd_box-right">
            <!-- 显示我的投递 @tab-click="handleClick"-->
              <div class="my-delivered-box" id="my_delivered_box" style="display: block">
                <div class="checkHr" @click="centerDialogVisible = true" ><i class="el-icon-chat-dot-square"></i>&nbsp;&nbsp;查看HR消息</div>
                <el-tabs v-model="activeName" >
                  <el-tab-pane label="已投递" name="first">我的投递-已投递
                    <div class="delivered-tab-container">
                      <div class="my-empty-box">
                        <img src="https://sxsimg.xiaoyuanzhao.com/static/new_main/img/no_collect.png?v=c1a2d13a15027838b5336cbba8c36356">
                      </div>
                      <div class="el-loading-mask" style="display: none;">
                        <div class="el-loading-spinner">
                          <svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane >

                  <el-tab-pane label="被查看" name="second">我的投递-被查看</el-tab-pane>
                  <el-tab-pane label="初筛" name="initial ">我的投递-初筛</el-tab-pane>
                  <el-tab-pane label="笔试" name="written">我的投递-笔试</el-tab-pane>
                  <el-tab-pane label="面试" name="interview">我的投递-面试</el-tab-pane>
                  <el-tab-pane label="不合适" name="inappropriate">我的投递-不合适</el-tab-pane>
                  <el-tab-pane label="录用" name="employment"> 我的投递-录用 </el-tab-pane>
<!--                  <el-tab-pane label="" name="checkHR"  closable style="color:red" >-->
<!--                    <span slot="label" @click="tabClick('item.categoryId')" ><i class="el-icon-chat-dot-square"></i> 查看HR消息</span>-->
<!--                  </el-tab-pane>-->
                </el-tabs>
              </div>
            <!--  显示我的收藏-->
            <div class="my-collect" id="my_collect" style="display: none">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="职位收藏" name="first">我的收藏-用户管理
                  <div class="delivered-tab-container">
                    <div class="my-empty-box">
                      <img src="https://sxsimg.xiaoyuanzhao.com/static/new_main/img/no_collect.png?v=c1a2d13a15027838b5336cbba8c36356">
                    </div>
                    <div class="el-loading-mask" style="display: none;">
                      <div class="el-loading-spinner">
                        <svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="关注公司" name="second">我的收藏-配置管理</el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <!--  弹窗-->
        <div class="my-dialog">
          <el-dialog
              title=""
              :visible.sync="centerDialogVisible"
              width="56%"
              center>
              <div class="dialog-middle" style="box-sizing: border-box">
                <img :src="tempdialogimg" alt="" style="width: 680px" >
              </div>
            </el-dialog>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable */
// 我的投递
import tempimg from '@/assets/img/user-default.png'
import tempdialog from '@/assets/img/temp_dialog.jpg'

export default {
  // 我的投递
  name: 'delivered',
  data () {
    return {
      activeName: 'first',
      isBlock_active: true,
      block_active1: false,
      block_active2: false,
      temptitleimg: tempimg,
      tempdialogimg: tempdialog,
      centerDialogVisible: false,
      msg: '我的投递'
    }
  },
  methods: {
    // 打开新页签
    handleToNewTab(routerName) {
      window.open(this.$router.resolve({name: routerName}).href, '_blank')
    },
    handleClick (tab, event) {
      console.log(tab, event)
      if (tab.name == 'checkHR') {
        // 触发‘配置管理’事件
        // this.checkHR();
      }
    },
    selectActive () {
      // e.currentTarget.className = 'block-item '
      // e.currentTarget.className = 'block-item block_item_active'
      this.isBlock_active = !this.isBlock_active
      if (this.isBlock_active) {
        this.block_active1 = true
        this.block_active2 = false
        let deliver = document.getElementById('my_delivered_box')
        let collect = document.getElementById('my_collect')
        deliver.style.display ='block'
        collect.style.display ='none'
      } else {
        this.block_active1 = false
        this.block_active2 = true
        let collect = document.getElementById('my_collect')
        let deliver = document.getElementById('my_delivered_box')
        deliver.style.display ='none'
        collect.style.display ='block'
      }
    },
    //
    tabClick(){
      alert('checkHR')
    },
    /*** 触发‘用户管理’事件 */
    checkHR() {
      alert('checkHR')
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.my-deliverd {
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.my-deliverd .h100 {
  box-sizing: border-box;
  padding-top: 20px;
}

.primary-content {
  width: 1080px;
  margin: 0 auto;
}

.my-deliverd_box {
  width: 100%;
  min-height: 480px;
  background: #fff;
  display: flex;
  justify-content: space-between;
}

.my-deliverd_box-left {
  width: 220px;
  min-height: 450px;
  border-right: 1px solid #e8e8ea;
}

.my-deliverd_box-left .my-info {
  width: 195px;
  height: 120px;
  display: flex;
  padding-left: 25px;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2px solid #e8e8ea;
}

.my-deliverd_box-left .my-info_head {
  margin-right: 16px;
}

.my-info .my-deliverd {
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.my-deliverd_box-left .my-info_head img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

img {
  border: none;
  vertical-align: middle;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  /*text-decoration: underline;*/
}

a {
  text-decoration: none;
  color: #333;
  outline: none;
}

.my-deliverd_box-left .my-info .info-title {
  max-width: 110px;
  font-size: 18px;
}

.my-deliverd_box-left .info-title {
  font-weight: 600;
  font-size: 20px;
  color: #252527;
  line-height: 26px;
}

.my-deliverd_box-left .info-detail {
  font-size: 13px;
  color: #a0a0a2;
  line-height: 17px;
}

.my-deliverd .ellipsis {
  overflow: hidden;
  white-space: nowrap;
  /* text-overflow: ellipsis; */
}


.my-deliverd_box-left .block-item {
  width: 220px;
  height: 120px;
  box-sizing: border-box;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.my-deliverd_box-left .info-title {
  font-weight: 600;
  font-size: 20px;
  color: #252527;
  line-height: 26px;
}

.my-deliverd_box-left .info-detail {
  font-size: 13px;
  color: #a0a0a2;
  line-height: 17px;
}

.my-deliverd_box-left .block_item_active {
  /* 点击选择背景色 */
  background: #f8f8fa;
  /*background: red;*/
}

.my-deliverd_box-left .info-title {
  font-weight: 600;
  font-size: 20px;
  color: #252527;
  line-height: 26px;
}

.my-deliverd_box-left .info-detail {
  font-size: 13px;
  color: #a0a0a2;
  line-height: 17px;
}

/*.my-deliverd_box-left .block-item-active {*/
/*  background: #f8f8fa;*/
/*}*/


/*右边显示内容区*/
.my-deliverd_box-right {
  flex: 1;
  height: 100%;
}
.my-delivered-box{
  position: relative;
}
.my-delivered-box>>>.el-tabs__nav,
.my-collect>>>.el-tabs__nav{
  margin-left: 30px;
}
.my-delivered-box>>>.el-tabs__item{
  height: 60px;
  font-size: 15px;
  line-height: 49px;
  font-weight: 400;
}
.my-deliverd .is-active {
  color: #6AA2E4;
  font-weight: 400;
  font-size: 15px;
}
.my-delivered-box .delivered-tab-container {
  padding: 0 30px;
  overflow: hidden;
}
.my-delivered-box .my-empty-box {
  width: 220px;
  margin: 100px auto;
}
.my-delivered-box .checkHr{
  display: flex;
  position: absolute;
  cursor:pointer;
  width: 20%;
  height: 40px;
  line-height: 40px;
  /*top: 7px;*/
  vertical-align: middle;
  right: 60px;
  color: #6AA2E4;
  font-weight: 400;
  font-size: 15px;
  z-index: 5;
}
.my-delivered-box .checkHr i{
  padding-top: 14px;
}

my-collect{
  font-size: 15px;
}

</style>
